<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>图片图层</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="//webapi.amap.com/maps?v=2.0&key=98c485ff1e3c2b4318481832bee4355a&plugin=AMap.Geocoder"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" >
    var imageLayer = new AMap.ImageLayer({
        url: 'http://yyjcs.top/dtdmeo/1.jpg',
        bounds: new AMap.Bounds(
            [116.392159,39.913331],  //x
            [116.401858,39.923715]   //y
        ),
        zooms: [15, 20]
    });
    var map = new AMap.Map('container', {
        center: [116.39705,39.917301],
        zoom: 15,
        layers: [
            AMap.createDefaultLayer(),
            imageLayer,
        ]
    });

//点添加
//1
    var marker1=new AMap.Marker({
        position:new AMap.LngLat(116.397228,39.913582),
        title:'午门',
        map:map
    });
    marker1.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"1午门"
    })
//2
    var marker2=new AMap.Marker({
        position:new AMap.LngLat(116.397158,39.915246),
        title:'太和门',
        map:map
    });
    marker2.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"2太和门"
    })
//3
    var marker3=new AMap.Marker({
        position:new AMap.LngLat(116.397083,39.917299),
        title:'太和殿',
        map:map
    });
    marker3.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"3太和殿",
    })
//4
    var marker4=new AMap.Marker({
        position:new AMap.LngLat(116.39696,39.918402),
        title:'保和殿',
        map:map
    });
    marker4.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"4保和殿",
    })
//5
    var marker5=new AMap.Marker({
        position:new AMap.LngLat(116.394385,39.919036),
        title:'慈宁宫',
        map:map
    });
    marker5.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"5慈宁宫",
    })
//6
    var marker6=new AMap.Marker({
        position:new AMap.LngLat(116.393993,39.9182),
        title:'咸若馆',
        map:map
    });
    marker6.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"6咸若馆",
    })
//7
    var marker7=new AMap.Marker({
        position:new AMap.LngLat(116.39365,39.919262),
        title:'寿康宫',
        map:map
    });
    marker7.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"7寿康宫",
    })

//8
    var marker8=new AMap.Marker({
        position:new AMap.LngLat(116.393924,39.9179),
        title:'慈宁宫后花园',
        map:map
    });
    marker8.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"8慈宁宫后花园",
    })
//9
    var marker9=new AMap.Marker({
        position:new AMap.LngLat(116.395297,39.915143),
        title:'断虹桥',
        map:map
    });
    marker9.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"9断虹桥",
    })
//10
    var marker10=new AMap.Marker({
        position:new AMap.LngLat(116.394632,39.915448),
        title:'武英殿',
        map:map
    });
    marker10.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"10武英殿",
    })
//11
    var marker11=new AMap.Marker({
        position:new AMap.LngLat(116.399374,39.915534),
        title:'文华殿',
        map:map
    });
    marker11.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"11文华殿",
    })
//12
    var marker12=new AMap.Marker({
        position:new AMap.LngLat(116.401402,39.915045),
        title:'东华门',
        map:map
    });
    marker12.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"12东华门",
    })


// 矢量图 路线规划

var path=[//每个弧线段有两种描述方式
    [116.397206,39.913489],//起点
        //路线图
     [116.397158,39.915246],
     [116.397083,39.917299],
	 [116.39696,39.918402],
	 [116.39436,39.918402],
	[116.394385,39.919036],
	 [116.39365,39.919262],
	 [116.393993,39.9182],
	 [116.393924,39.9179],
	  [116.39436,39.918402],
	  [116.39526,39.918402],

	 [116.395297,39.915143],
	  [116.394632,39.915143],
	 [116.394632,39.915448],
	[116.394632,39.915143],
	  [116.395297,39.915143],
	   [116.399574,39.914634],
	 [116.399574,39.915534],

	[116.399574,39.914634],
	 [116.401402,39.915045],

];
var polyline = new AMap.Polyline({
      path: path,
      isOutline: true,
      outlineColor: '#ffeeff',
      borderWeight: 3,
      strokeColor: "#3366FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      // 折线样式还支持 'dashed'
      strokeStyle: "solid",
      // strokeStyle是dashed时有效
      strokeDasharray: [10, 5],
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 50,
    })
    map.add([polyline]);
    map.setFitView();
</script>
</body>
</html>
